<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FDValidate Test</title>
<!-- css -->
<link id="fd_theme" href="../../styles/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../styles/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{font-size: 12px}
.error {
color: red;
}
.success {
color:green;
}
</style>
<!-- lib -->
<script type="text/javascript" src="../../src/FDLib/FDLib.js"></script>
<script type="text/javascript" src="../../src/JsMap.js"></script>
<!-- app js -->
<script type="text/javascript" src="../theme.js"></script>
</head>
<body>
验证结果:<span id="result"></span><br>

<table>
	<tr> <td>验证正整数:</td> <td id="t1"></td> <td id="msgId1"></td> </tr>
	<tr> <td>验证自然数(长度4~10):</td> <td id="t2"></td> <td id="msgId2"></td> </tr>
	<tr> <td>验证正数:</td> <td id="t3"></td> <td id="msgId3"></td> </tr>
	<tr> <td>验证浮点数:</td> <td id="t4"></td> <td id="msgId4"></td> </tr>
	<tr> <td>验证正浮点数:</td> <td id="t5"></td> <td id="msgId5"></td> </tr>
	<tr> <td>验证非负浮点数:</td> <td id="t6"></td> <td id="msgId6"></td> </tr>
	<tr> <td>验证邮箱:</td> <td id="t7"></td> <td id="msgId7"></td> </tr>
	<tr> <td>验证手机号:</td> <td id="t8"></td> <td id="msgId8"></td> </tr>
	<tr> <td>验证电话:</td> <td id="t9"></td> <td id="msgId9"></td> </tr>
</table>


<button onclick="validate()">validate</button>
<br>
============================
<p>单独验证:</p>
<input id="numAlone" type="text" value="123" />
<div id="vAlone" style="font-size: 14px;"></div>
<button onclick="validateAlone()">单独验证正整数</button>
<br />
自定义验证(大于10的数):
<br />
<input type="text" id="mySelf" />
<button onclick="validateMySelf()">自定义验证</button>

<script type="text/javascript">
FDLib.setDir('../../src/');
//FDLib.openDebug();
var controls;

FDLib.loadJs(['FDTextBox','FDValidate'],function() {
	controls = [
		new FDTextBox({domId:'t1',msgId:'msgId1',label:'验证正整数:',validates:[{rule:{positiveInt:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'X 请输入整整数'}]})
		,new FDTextBox({domId:'t2',msgId:'msgId2',label:'验证自然数(长度4~10):',validates:
				[
				{rule:{naturalNum:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入自然数'}
				,{rule:{minLength:4,maxLength:10},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'长度必须为4~10'}
				]})
		,new FDTextBox({domId:'t3',msgId:'msgId3',label:'验证正数:',validates:[{rule:{positiveNum:true,notNull:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入大于零的数'}]})
		,new FDTextBox({domId:'t4',msgId:'msgId4',label:'验证浮点数:',validates:[{rule:{floatNum:true,notNull:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入浮点数'}]})
		,new FDTextBox({domId:'t5',msgId:'msgId5',label:'验证正浮点数:',validates:[{rule:{positiveFloatNum:true,notNull:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入正浮点数'}]})
		,new FDTextBox({domId:'t6',msgId:'msgId6',label:'验证非负浮点数:',validates:[{rule:{notNegativeFloatNum:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入非负浮点数'}]})
		,new FDTextBox({domId:'t7',msgId:'msgId7',label:'验证邮箱:',validates:[{rule:{email:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入正确的邮箱'}]})
		,new FDTextBox({domId:'t8',msgId:'msgId8',label:'验证手机号:',validates:[{rule:{mobile:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入正确的手机号'}]})
		,new FDTextBox({domId:'t9',msgId:'msgId9',label:'验证电话:',validates:[{rule:{tel:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'请输入正确的电话号'}]})
	]
});

function validate() {
	var result = true;
	for(var i in controls) {
		var val = controls[i].validate();
		result = result && val;
	}
	FDLib.getEl('result').innerHTML = result;
}

function validateAlone() {
	var num = FDLib.getEl('numAlone').value;
	var validAlone = new FDValidate({rule:{positiveInt:true},successClass:'success',errorClass:'error',successMsg:'√',errorMsg:'X 请输入整整数'})
	validAlone.setMsgId('vAlone');
	validAlone.validate(num);
}

// 自定义验证方法,验证是否大于10
function validateFunc(val) {
	if(isNaN(val)) {
		return false;
	}
	return val > 10;
}


function validateMySelf() {
	// 自定义方法
	var v = new FDValidate({validateHandler:validateFunc});
	var num = FDLib.getEl('mySelf').value;
	alert(v.validate(num))
}
</script>
</body>
</html>